<template>
	<view class="fund-detail">
		<!-- 头部基金收益率 -->
		<view class="detail-header">
			<view class="header-top">
				<text class="top-big-title">2.48</text>
				<text class="top-big-sub-title">七日年化收益率(%)</text>
			</view>
			<view class="header-bottom">
				<view class="bottom-item">
					<text class="bottom-item-title">0.6709</text>
					<text class="bottom-item-sub-title">万分收益(02-26)</text>
				</view>
				<view class="bottom-item">
					<text class="bottom-item-title">100.00</text>
					<text class="bottom-item-sub-title">起购金额</text>
				</view>
			</view>
		</view>
		<!-- 基金详情主题内容模块 -->
		<view class="detail-module">
			<!-- 七日年化收益曲线模块 -->
			<view class="item-title">
				<view class="title-left">
					<view class="item-title-icon"></view>
					<text class="item-title-text">七日年化收益曲线</text>
				</view>
				<image src="../../static/wealthFund/to-img.png" class="item-title-img"></image>
			</view>
			<view class="item-body">
				<!-- 七日年化收益曲线模块主体内容 -->
				<view class="item-sub-body">
					<view class="charts-box">
						<qiun-data-charts type="line" :chartData="chartData" background="none" :ontap="false"
							:onmouse="false" />
					</view>
					<view class="changecharts" @click="changeit1">
						<view :class="[curchart ==='chart1'? 'select':'unselect']" data-id="chart1">分时</view>
						<view :class="[curchart ==='chart2'? 'select':'unselect']" data-id="chart2">近一月</view>
						<view :class="[curchart ==='chart3'? 'select':'unselect']" data-id="chart3">近半年</view>
						<view :class="[curchart ==='chart4'? 'select':'unselect']" data-id="chart4">近一年</view>
					</view>
				</view>
				<!-- 基金档案 交易规则 常见问题 -->
				<view class="item-sub-body-2">
					<view class="tab-page" @click="changeTab">
						<view :class="[curTab === 'tab1' ? 'active-tab':'normal-tab']" data-tab="tab1">基金档案</view>
						<view :class="[curTab === 'tab2' ? 'active-tab':'normal-tab']" data-tab="tab2">交易规则</view>
						<view :class="[curTab === 'tab3' ? 'active-tab':'normal-tab']" data-tab="tab3">常见问题</view>
					</view>
					<!-- 基金档案 -->
					<view class="tab-content1" v-if="curTab==='tab1'">
						<!-- 基本信息 -->
						<view class="basic-info">
							<view class="item-row">
								<text class="row-big-title">基本信息</text>
							</view>
							<view class="item-row">
								<view class="row-left">
									<text class="row-sub-title">基金全称</text>
									<text class="row-text">汇添富双利债券型证券投资基金</text>
								</view>
							</view>
							<view class="item-row">
								<view class="row-left">
									<text class="row-sub-title">基金代码</text>
									<text class="row-text">470018</text>
								</view>
							</view>
							<view class="item-row">
								<view class="row-left">
									<text class="row-sub-title">基金类型</text>
									<text class="row-text">债券型(低风险)</text>
								</view>
							</view>
							<view class="item-row">
								<view class="row-left">
									<text class="row-sub-title">基金状态</text>
									<text class="row-text">开放交易</text>
								</view>
							</view>
							<view class="item-row">
								<view class="row-left">
									<text class="row-sub-title">成立日期</text>
									<text class="row-text">2011-01-26</text>
								</view>
							</view>
							<view class="item-row">
								<view class="row-left">
									<text class="row-sub-title">基金经理</text>
									<text class="row-text">杨宇宁</text>
								</view>
								<image src="../../static/wealthFund/to-img.png" class="row-img"></image>
							</view>
							<view class="item-row">
								<view class="row-left">
									<text class="row-sub-title">基金公司</text>
									<text class="row-text">汇添富基金管理股份有限公司</text>
								</view>
								<image src="../../static/wealthFund/to-img.png" class="row-img"></image>
							</view>
						</view>
						<view class="wealth-config">
							<view class="item-title">
								<view class="title-left">
									<view class="item-title-icon"></view>
									<text class="item-title-text">资产配置</text>
								</view>
							</view>
							<view class="pie-chart">
								<view class="pie-left">
									<view class="pie-item">
										<text class="item-icon"></text>
										<text class="item-txt">债券77.62%</text>
									</view>
									<view class="pie-item">
										<text class="item-icon"></text>
										<text class="item-txt">股票17.88%</text>
									</view>
								</view>
								<!-- 环状图 -->
								<view class="pie-center">
									<view class="charts-box-2">
										<qiun-data-charts type="ring" :chartData="ringChartData" background="none" />
									</view>
								</view>
								<view class="pie-right">
									<view class="pie-item">
										<text class="item-icon"></text>
										<text class="item-txt">现金1.79%</text>
									</view>
								</view>
							</view>
							<!-- 公司备注 -->
							<view class="other-info">
								<text class="big-title">基金销售服务由成都宇宁基金销售有限公司提供</text>
								<text class="sub-title">
									投资前请详细阅读基金合同，招募说明书。基金的过往业绩不预示其未来表现，市场有风险，投资需谨慎
								</text>
							</view>
						</view>
					</view>
					<!-- 交易规则 -->
					<view class="tab-content2" v-if="curTab==='tab2'">
						<!-- 购买规则 -->
						<view class="tab2-item">
							<text class="item-title">购买规则</text>
							<view class="item-body">
								<!-- 时间节点分割线 -->
								<view class="time-node">
									<view class="time-item">
										<view class="time-line-ring">
											<view class="line"></view>
											<view class="ring"></view>
											<view class="line"></view>
										</view>
										<view class="time-text">
											<text class="red">T日15点前</text>
											<text class="black">购买</text>
										</view>
									</view>
									<view class="time-item">
										<view class="time-line-ring">
											<view class="line"></view>
											<view class="ring"></view>
											<view class="line"></view>
										</view>
										<view class="time-text">
											<text class="red">T+1日17点后</text>
											<text class="black">确认份额</text>
										</view>
									</view>
									<view class="time-item">
										<view class="time-line-ring">
											<view class="line"></view>
											<view class="ring"></view>
											<view class="line"></view>
										</view>
										<view class="time-text">
											<text class="red">T+2日</text>
											<text class="black">查看收益</text>
										</view>
									</view>
									<view class="time-item">
										<view class="time-line-ring">
											<view class="line"></view>
											<view class="ring"></view>
											<view class="line"></view>
										</view>
										<view class="time-text">
											<text class="red">T+2日起</text>
											<text class="black">可赎回</text>
										</view>
									</view>
								</view>

								<text class="payattention">
									*T日为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日
								</text>

								<view class="money-table">
									<uni-table stripe border="2rpx solid #999" emptyText="暂无更多数据">
										<uni-tr>
											<uni-th align="center" width="50%">
												<text class="th-text">金额(元)</text>
											</uni-th>
											<uni-th align="center" width="50%">
												<text class="th-text">费用</text>
											</uni-th>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">0</text>
													<text class="td-big-text">≤</text>
													<text class="td-big-text">金额</text>
													<text class="td-big-text">＜</text>
													<text class="td-big-text">100万</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-small-text">1.5%</text>
													<text class="td-big-text">0.6%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">100万</text>
													<text class="td-big-text">≤</text>
													<text class="td-big-text">金额</text>
													<text class="td-big-text">＜</text>
													<text class="td-big-text">200万</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-small-text">1%</text>
													<text class="td-big-text">0.6%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">200万</text>
													<text class="td-big-text">≤</text>
													<text class="td-big-text">金额</text>
													<text class="td-big-text">＜</text>
													<text class="td-big-text">500万</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-small-text">0.3%</text>
													<text class="td-big-text">0.3%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">金额</text>
													<text class="td-big-text" ≥＜</text>
														<text class="td-big-text">500万</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-small-text">1000元</text>
													<text class="td-big-text">1000元</text>
												</view>
											</uni-td>
										</uni-tr>
									</uni-table>
								</view>

							</view>
						</view>
						<!-- 赎回规则 -->
						<view class="tab2-item">
							<text class="item-title">赎回规则</text>
							<view class="item-body">
								<!-- 时间节点分割线 -->
								<view class="time-node">
									<view class="time-item">
										<view class="time-line-ring">
											<view class="line"></view>
											<view class="ring"></view>
											<view class="line"></view>
										</view>
										<view class="time-text">
											<text class="red">T日15点前</text>
											<text class="black">赎回</text>
										</view>
									</view>
									<view class="time-item">
										<view class="time-line-ring">
											<view class="line"></view>
											<view class="ring"></view>
											<view class="line"></view>
										</view>
										<view class="time-text">
											<text class="red">T+1日17点后</text>
											<text class="black">确认份额及到账金额</text>
										</view>
									</view>
									<view class="time-item">
										<view class="time-line-ring">
											<view class="line"></view>
											<view class="ring"></view>
											<view class="line"></view>
										</view>
										<view class="time-text">
											<text class="red">T+2日</text>
											<text class="black">24点前到账</text>
										</view>
									</view>
								</view>

								<text class="payattention">
									*T日为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日
								</text>

								<view class="money-table">
									<uni-table stripe border="2rpx solid #999" emptyText="暂无更多数据">
										<uni-tr>
											<uni-th align="center" width="50%">
												<text class="th-text">持有时间</text>
											</uni-th>
											<uni-th align="center" width="50%">
												<text class="th-text">费用</text>
											</uni-th>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">7天</text>
													<text class="td-big-text">≤</text>
													<text class="td-big-text">持有期限</text>
													<text class="td-big-text">＜</text>
													<text class="td-big-text">365天</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">0.50%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">1年</text>
													<text class="td-big-text">≤</text>
													<text class="td-big-text">持有期限</text>
													<text class="td-big-text">＜</text>
													<text class="td-big-text">2年</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">0.25%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">持有期限</text>
													<text class="td-big-text">＞</text>
													<text class="td-big-text">2年</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">0.00%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">0天</text>
													<text class="td-big-text">≤</text>
													<text class="td-big-text">持有期限</text>
													<text class="td-big-text">＜</text>
													<text class="td-big-text">7天</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">1.50%</text>
												</view>
											</uni-td>
										</uni-tr>
									</uni-table>
								</view>

							</view>
						</view>
						<!-- 运作费用 -->
						<view class="tab2-item">
							<text class="item-title">运作费用</text>
							<view class="item-body">
								<view class="money-table">
									<uni-table stripe border="2rpx solid #999" emptyText="暂无更多数据">
										<!-- <uni-tr>
											<uni-th align="center" width="50%">
												<text class="th-text">管理费</text>
											</uni-th>
											<uni-th align="center" width="50%">
												<text class="th-text">费用</text>
											</uni-th>
										</uni-tr> -->
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">管理费</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">1.50%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">托管费</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">0.25%</text>
												</view>
											</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">销售服务费</text>
												</view>
											</uni-td>
											<uni-td align="center">
												<view class="td-text">
													<text class="td-big-text">--</text>
												</view>
											</uni-td>
										</uni-tr>
									</uni-table>
								</view>

							</view>
						</view>
						<!-- 公司备注 -->
						<view class="other-info">
							<text class="big-title">基金销售服务由成都宇宁基金销售有限公司提供</text>
							<text class="sub-title">
								投资前请详细阅读基金合同，招募说明书。基金的过往业绩不预示其未来表现，市场有风险，投资需谨慎
							</text>
						</view>
					</view>
					<!-- 常见问题 -->
					<view class="tab-content3" v-if="curTab==='tab3'">
						<view class="tab3-item">
							<view class="button-title">
								<text class="question">什么是基金？</text>
							</view>
							<view class="answer-content">
								<text
									class="answer">基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
							</view>
						</view>
						<view class="other-info">
							<text class="big-title">基金销售服务由成都宇宁基金销售有限公司提供</text>
							<text class="sub-title">
								投资前请详细阅读基金合同，招募说明书。基金的过往业绩不预示其未来表现，市场有风险，投资需谨慎
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部固定栏 -->
		<view class="footer">
			<view class="footer-item-1">
				<image src="../../static/wealthFundDetail/shoucang.png" class="item-1-img"></image>
				<text class="item-1-txt">收藏</text>
			</view>
			<view class="footer-item-1">
				<image src="../../static/wealthFundDetail/quanzi.png" class="item-1-img"></image>
				<text class="item-1-txt">圈子</text>
			</view>
			<text class="footer-item-2">定投</text>
			<text class="footer-item-3">立即购买</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前标签页状态值
				curTab: 'tab1',
				// 折线图数据
				chartData: {
					"categories": [
						"01-28",
						"02-09",
						"02-26",
					],
					"series": [{
							"name": "",
							"data": [35, 8, 25, 30, 50, 80, ]
						},
						{
							"name": "",
							"data": [70, 40, 65, 25, 60, 70, ]
						}
					]
				},
				// 当前折线图状态值
				curchart: 'chart1',
				// 环状图数据
				ringChartData: {
					"series": [{
						"data": [{
								"name": "一班",
								"value": 85
							},
							{
								"name": "二班",
								"value": 5
							},
							{
								"name": "三班",
								"value": 10
							},
						]
					}]
				},
			};
		},
		methods: {
			// 切换选中的折线图数据
			changeit1(e) {
				this.curchart = e.target.dataset.id;
			},
			changeTab(e) {
				this.curTab = e.target.dataset.tab;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fund-detail {
		position: relative;

		.detail-header {
			height: 440rpx;
			background-image: url(../../static/wealthFundDetail/back-img.png);
			background-repeat: no-repeat;
			background-size: cover;
			padding: 50rpx 100rpx 90rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.header-top {
				display: flex;
				flex-direction: column;
				align-items: center;

				.top-big-title {
					font-size: 60rpx;
					color: #fff;
					font-weight: bold;
					margin-bottom: 32rpx;
				}

				.top-big-sub-title {
					font-size: 24rpx;
					color: #fff;
				}
			}

			.header-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.bottom-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.bottom-item-title {
						font-size: 40rpx;
						color: #fff;
						font-weight: bold;
						margin-bottom: 20rpx;
					}

					.bottom-item-sub-title {
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}

		.detail-module {
			margin-top: -40rpx;
			background-color: #fff;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			padding: 40rpx 24rpx;

			.item-title {

				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.title-left {
					display: flex;
					align-items: center;

					.item-title-icon {
						width: 8rpx;
						height: 30rpx;
						margin-right: 10rpx;
						border-radius: 6rpx;
						background-color: #3476f1;
					}

					.item-title-text {
						font-size: 32rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}

					.item-little-title-text {
						font-size: 20rpx;
						color: #999;
					}
				}

				.item-title-img {
					width: 17rpx;
					height: 30rpx;
				}
			}

			.item-body {
				margin-bottom: 40rpx;

				// 模块样式1：适用于七日年化收益曲线模块
				.item-sub-body {
					border-radius: 12rpx;
					box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);
					padding: 30rpx 0rpx 0rpx 0rpx;
					margin-bottom: 40rpx;

					.charts-box {
						height: 500rpx;
						padding-right: 30rpx;
					}

					.changecharts {
						padding: 30rpx;
						height: 60rpx;
						display: flex;

						.unselect {
							flex: 1;
							font-size: 28rpx;
							color: #999;
							border: 2rpx solid rgba($color: #000000, $alpha: 0.03);
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.select {
							border: 2rpx solid rgba($color: #000000, $alpha: 0.03);
							background-color: #3476F1;
							flex: 1;
							color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.item-sub-body-2 {
					.tab-page {
						display: flex;
						align-items: center;
						margin-bottom: 40rpx;

						.normal-tab {
							font-size: 28rpx;
							color: #999;
							margin-right: 60rpx;
						}

						.active-tab {
							font-size: 36rpx;
							color: #3476F1;
							font-weight: bold;
							margin-right: 60rpx;
							position: relative;

							&::after {
								content: "";
								position: absolute;
								bottom: -15rpx;
								left: 0rpx;
								right: 0rpx;
								margin: 0 auto;
								z-index: 2;
								width: 60rpx;
								height: 10rpx;
								border-radius: 5rpx;
								background-color: #3476F1;
							}
						}
					}

					.tab-content1 {

						.basic-info {
							padding: 30rpx;
							margin-bottom: 40rpx;
							border-radius: 12rpx;
							box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);

							.item-row {
								display: flex;
								justify-content: space-between;
								align-items: center;
								border-bottom: 2rpx solid rgba($color: #000000, $alpha: 0.03);
								padding: 30rpx 0;

								&:last-child {
									border-bottom: none;
									padding-bottom: 0;
								}

								.row-big-title {
									font-size: 36rpx;
									color: #999;
								}

								.row-left {
									.row-sub-title {
										font-size: 28rpx;
										color: #999;
										margin-right: 30rpx;
									}

									.row-text {
										font-size: 28rpx;
										color: #333;
									}
								}

								.row-img {
									width: 15rpx;
									height: 28rpx;
								}
							}
						}

						.wealth-config {
							.item-title {

								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 40rpx;

								.title-left {
									display: flex;
									align-items: center;

									.item-title-icon {
										width: 8rpx;
										height: 30rpx;
										margin-right: 10rpx;
										border-radius: 6rpx;
										background-color: #3476f1;
									}

									.item-title-text {
										font-size: 32rpx;
										font-weight: bold;
										margin-right: 10rpx;
									}
								}

							}

							.pie-chart {
								border-radius: 12rpx;
								box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);
								padding: 20rpx 56rpx;
								margin-bottom: 40rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.pie-left {
									display: flex;
									height: 200rpx;
									flex-direction: column;
									justify-content: space-between;
									align-items: flex-start;

									.pie-item {
										display: flex;
										align-items: center;

										.item-icon {
											width: 4rpx;
											height: 18rpx;
											margin-right: 10rpx;
											background-color: #3476F1;
										}

										.item-txt {
											font-size: 24rpx;
											color: #999;
										}
									}
								}

								.pie-center {
									.charts-box-2 {
										width: 300rpx;
										height: 300rpx;
									}
								}

								.pie-right {
									display: flex;
									flex-direction: column-reverse;
									height: 200rpx;

									.pie-item {
										display: flex;
										align-items: center;

										.item-icon {
											width: 4rpx;
											height: 18rpx;
											margin-right: 10rpx;
											background-color: #3476F1;
										}

										.item-txt {
											font-size: 24rpx;
											color: #999;
										}
									}
								}
							}

							.other-info {
								margin-bottom: 100rpx;
								display: flex;
								flex-direction: column;

								.big-title {
									font-size: 28rpx;
									color: #666;
									margin-bottom: 14rpx;
								}

								.sub-title {
									font-size: 20rpx;
									color: #666;
								}
							}
						}
					}

					.tab-content2 {
						margin-bottom: 100rpx;

						.tab2-item {
							border-radius: 12rpx;
							box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);
							padding: 24rpx;
							margin-bottom: 40rpx;

							.item-title {
								font-size: 28rpx;
								color: #999;
								margin-bottom: 28rpx;
							}

							>.item-body {
								margin-bottom: 0rpx;

								.time-node {
									display: flex;
									margin-bottom: 30rpx;

									.time-item {

										flex-grow: 1;

										.time-line-ring {
											display: flex;

											.line {
												flex-grow: 1;
												height: 28rpx;
												border-top: 2rpx dashed #999;
											}

											.ring {
												width: 12rpx;
												height: 12rpx;
												margin-top: -6rpx;
												border-radius: 6rpx;
												border: 2rpx dotted #999;
											}
										}

										.time-text {
											display: flex;
											flex-direction: column;
											align-items: center;

											.red {
												font-size: 24rpx;
												color: red;
												margin-bottom: 16rpx;
											}

											.black {
												font-size: 24rpx;
												color: #333;
											}
										}
									}
								}

								.payattention {
									font-size: 24rpx;
									color: #999;
									line-height: 36rpx;
								}

								.money-table {
									margin-top: 40rpx;

									.th-text {
										font-size: 28rpx;
										color: #333;
										font-weight: bold;
									}

									.td-text {
										.td-big-text {
											font-size: 28rpx;
											color: #999;
											margin-right: 6rpx;

											&:last-child {
												margin-right: 0;
											}
										}

										.td-small-text {
											font-size: 24rpx;
											color: #999;
											text-decoration: line-through;
											margin-right: 4rpx;
										}
									}
								}


							}
						}

						.other-info {
							margin-bottom: 140rpx;
							display: flex;
							flex-direction: column;

							.big-title {
								font-size: 28rpx;
								color: #666;
								margin-bottom: 14rpx;
							}

							.sub-title {
								font-size: 20rpx;
								color: #666;
							}
						}
					}

					.tab-content3 {
						margin-bottom: 100rpx;

						.tab3-item {
							margin-bottom: 40rpx;
							padding: 24rpx;
							border-radius: 12rpx;
							box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);

							.button-title {
								display: flex;
								justify-content: flex-end;
								margin-bottom: 40rpx;

								.question {
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 12rpx;
									padding: 0 30rpx;
									height: 86rpx;
									background-color: #3476f1;
									font-size: 28rpx;
									color: #fff;
								}
							}

							.answer-content {
								height: 280rpx;

								.answer {
									padding: 24rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 28rpx;
									line-height: 48rpx;
									color: #666;
									border-radius: 12rpx;
									border: 2rpx solid rgba($color: #000000, $alpha: 0.05);
								}
							}
						}

						.other-info {
							margin-bottom: 140rpx;
							display: flex;
							flex-direction: column;

							.big-title {
								font-size: 28rpx;
								color: #666;
								margin-bottom: 14rpx;
							}

							.sub-title {
								font-size: 20rpx;
								color: #666;
							}
						}
					}
				}
			}
		}

		// 固定底部购买栏
		.footer {
			// padding-bottom: 40rpx;
			box-sizing: border-box;
			position: fixed;
			z-index: 1000;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			display: flex;

			.footer-item-1 {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.item-1-img {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 8rpx;
				}

				.item-1-txt {
					font-size: 20rpx;
					color: #666;
				}
			}

			.footer-item-2 {
				flex-grow: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #fff;
				background-color: #E2BC7F;
			}

			.footer-item-3 {
				flex-grow: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #fff;
				background-color: #3476F1;
			}
		}
	}
</style>
